<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:if="false">
    <!--发布时将该段代码去掉-->
    <!--<title>系统控制器设置</title>-->
    <!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
    <!--<link href="../../resources/lib/bui/css/dpl-min.css" rel="stylesheet" type="text/css" />-->
    <!--<link href="../../resources/lib/bui/css/bui-min.css" rel="stylesheet" type="text/css" />-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/jquery-1.8.1.min.js"></script>-->
    <!--<script type="text/javascript" src="../../resources/lib/bui/js/bui-min.js"></script>-->
</head>
<body>
<div style="margin-bottom: 10px;">
    <button class="button" type="button">添加系统控制器</button>
    <button class="button" type="button">添加门控制器</button>
</div>
<div>
    <div id="door_tab"></div>
    <div id="door_panel" class="bordered" style="padding:10px;">
        <div><!-- 基本设置 -->
            <form id="door_base_form" action="" class="form-horizontal">
                <div class="control-group">
                    <label class="control-label"><s>*</s>名称：</label>
                    <div class="controls">
                        <input name="name" type="text" class="input-normal" data-rules="{required : true}" value="bb">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"><s>*</s>编号：</label>
                    <div class="controls">
                        <input type="text" class="input-normal" data-rules="{required : true}">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">使能：</label>
                    <div class="controls">
                        <label class="radio"><input type="radio">是</label>&nbsp;&nbsp;&nbsp;
                        <label class="radio"><input type="radio">否</label>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">安装日期：</label>
                    <div class="controls">
                        <!--<input class="calendar calendar-time" name="h" type="text">-->
                        <input class="calendar" name="h" type="text">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label">备注：</label>
                    <div class="controls control-row-auto">
                        <textarea name="" class="control-row4 input-large"></textarea>
                    </div>
                </div>
                <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                    <div class="form-actions pull-right">
                        <button type="submit" class="button button-primary">保存</button>
                        <button type="reset" class="button">重置</button>
                    </div>
                </div>
            </form>
        </div>
        <div><!-- 安装设置 -->
            <form id="door_setup_form" action="" class="form-horizontal">
                <div class="row">
                    <div class="span7">
                        <fieldset>
                            <legend>物理信息</legend>
                            <div class="control-group">
                                <label class="control-label" style="width: 80px"><s>*</s>IP：</label>
                                <div class="controls">
                                    <input type="text" class="input-small" data-rules="{required : true}" style="width: 40px;">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" style="width: 80px"><s>*</s>端口：</label>
                                <div class="controls">
                                    <input type="text" class="input-small" data-rules="{required : true}" style="width: 40px;">
                                </div>
                            </div>
                        </fieldset>
                    </div>

                </div>
                <div class="row actions-bar" style="margin-right: -10px; margin-bottom: -10px;">
                    <div class="form-actions pull-right">
                        <button type="submit" class="button button-primary">保存</button>
                        <button type="reset" class="button">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!--<script src="http://g.tbcdn.cn/fi/bui/bui-min.js?t=201308062006"></script>-->
<script type="text/javascript">

    var Tab = BUI.Tab
    var doorTab = new Tab.TabPanel({
        render : '#door_tab',
        elCls : 'nav-tabs',
        panelContainer : '#door_panel',
        autoRender: true,
        children:[
            {text:'基本设置'},
            {text:'安装设置'}
        ]
    });
    doorTab.setSelected(doorTab.getItemAt(0));

    var Form = BUI.Form;
    new Form.Form({
        srcNode : '#door_base_form'
    }).render();
    new Form.Form({
        srcNode : '#door_setup_form'
    }).render();

    $('#door_base_form').on('submit',function(ev) {
        ev.preventDefault();
        //序列化成对象
        var obj = BUI.FormHelper.serializeToObject($(this));
        //显示对象
        alert(BUI.JSON.stringify(obj));
    });
</script>
</body>
</html>
